<template>
	<view class="settle">
		<view class="forms">
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">服务点名称</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="text" v-model='store_name' placeholder="请输入服务点名称" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">昵称</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="text" v-model='receiver' placeholder="请输入团长昵称" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">手机号</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="number" v-model='phone' placeholder="请输入手机号码" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">所在地区</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt" @tap='chooseAdd'>
						<input v-model='address' type="text" placeholder="请选择所在地区" disabled
							placeholder-style="color:#999999;">
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">详细地址</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input v-model='address_detail' type="text" placeholder="请输入详细地址"
							placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">服务点图片</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="upTool imgPublic" @tap='upImg("store_imgs")'>
					<image v-if='store_imgs' :src="store_imgs" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="otherTool dFlex jBetween_aCenter">
				<text>是否可冷藏</text>
				<switch v-model='is_lc' @change='changeLC' style="transform: scale(0.8);" />
			</view>
		</view>
		<view class="part">
			<view class="title">冷藏柜图片</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="upTool imgPublic" @tap='upImg("ice_imgs")'>
					<image v-if='ice_imgs' :src="ice_imgs" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">店铺LOGO</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="upTool imgPublic" @tap='upImg("store_logo")'>
					<image v-if='store_logo' :src="store_logo" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">营业执照</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="upTool imgPublic" @tap='upImg("store_license")'>
					<image v-if='store_license' :src="store_license" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">身份证正/反面</view>
			<view class="imgs dFlex jAround_aCenter">
				<view class="sfz imgPublic" @tap='upImg("card_front")'>
					<image v-if='card_front' :src="card_front" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/zhengmian.png" mode="widthFix"></image>
				</view>
				<view class="sfz imgPublic" @tap='upImg("card_back")'>
					<image v-if='card_back' :src="card_back" mode="widthFix"></image>
					<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/fanmian.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class='seat'></view>
		<view class="loginBtn" @click='applyTeam'>申请成为团长</view>
		<login :loginStatus='isLogin' @opFlag='closeLogin' :code='code' :status='1'></login>
	</view>
</template>

<script>
	import login from '@/components/login.vue';
	export default {
		components: {
			login
		},
		data() {
			return {
				address_id: '',
				receiver: '',
				phone: '',
				address: '',
				address_detail: '',
				lat: '',
				lng: '',
				store_name: '',
				store_imgs: '',
				is_lc: false,
				ice_imgs: '',
				store_logo: '',
				store_license: '',
				card_front: '',
				card_back: '',
				// 登录
				isLogin:false,
				code:'',
			};
		},
		onLoad(e) {

		}, 
		onShow() {
			this.isLogin = uni.getStorageSync('uToken')?true:false;
			if(!this.isLogin){
				uni.login({
					success:(code)=>{
						this.code = code.code;
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			}else{
				this.initUser();
			}
		},
		methods: {
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						if(res.auth_status == '1' || res.auth_status == '2'){
							uni.showToast({
								title:res.auth_status == '1' ? '您的申请正在审核中' : '您已开通团长身份',
								icon:'none'
							})
							var pages = getCurrentPages();
							if(pages[0].route == 'my/settle'){
								setTimeout(() => {
									uni.switchTab({
										url:'/pages/seller'
									})
								}, 1650)
							}else{
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1650)
							}
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 关闭登录
			closeLogin(status){
				this.isLogin = status;
			},
			changeLC(event){
				this.is_lc = event.detail.value;
			},
			// 申请成为团长
			applyTeam() {
				let tips = '';
				if (!this.receiver) {
					tips = '团长昵称';
				} else if (!this.phone) {
					tips = '手机号码';
				} else if (!this.address) {
					tips = '所在地区';
				} else if (!this.address_detail) {
					tips = '详细地址';
				} else if (!this.store_name) {
					tips = '服务点名称';
				} else if (!this.store_imgs) {
					tips = '服务点图片';
				} else if (this.is_lc && !this.ice_imgs) {
					tips = '冷藏柜图片';
				} else if (!this.store_logo) {
					tips = '店铺LOGO';
				} else if (!this.store_license) {
					tips = '营业执照';
				} else if (!this.card_front) {
					tips = '身份证正面';
				} else if (!this.card_back) {
					tips = '身份证反面';
				}
				if (tips) {
					uni.showToast({
						title: '请完善'+tips,
						icon: "none",
					})
					return;
				}
				this.tool.getData("/api/User/saveTeamAddress", {
					address_id: this.address_id,
					receiver: this.receiver,
					phone: this.phone,
					address: this.address,
					address_detail: this.address_detail,
					lat: this.lat,
					lng: this.lng,
					store_name: this.store_name,
					store_imgs: this.store_imgs,
					is_lc: this.is_lc ? '1' : '0',
					ice_imgs: this.ice_imgs,
					store_logo: this.store_logo,
					store_license: this.store_license,
					card_front: this.card_front,
					card_back: this.card_back,
				}).then(res => {
					console.log(res);
					if (res) {
						uni.showToast({
							title: "申请已提交",
							icon: "success"
						})
						var pages = getCurrentPages();
						if(pages[0].route == 'my/settle'){
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/seller'
								})
							}, 1650)
						}else{
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1650)
						}
						
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 上传图片
			upImg(key) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image', 'video'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.tempFiles.length) {
							this.tool.upImg(res.tempFiles[0].tempFilePath).then(file => {
								if (file) {
									this[key] = file.fullurl;
								}
							})
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 选择所在地区
			chooseAdd() {
				uni.chooseLocation({
					success: (locate) => {
						if (locate.errMsg == 'chooseLocation:ok') {
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							this.address = locate.address.match(reg).join('_');
							this.address_detail = locate.name;
							this.lat = locate.latitude;
							this.lng = locate.longitude;
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginBtn {
		width: 74.4%;
		left: 12.8%;
		padding: 22rpx 0;
		background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		position: fixed;
		bottom: 32px;
		text-align: center;
		border-radius: 40px;
		color: white;
		font-size: 16px;
	}

	.part {
		width: 100%;
		background: white;
		margin-bottom: 12px;
		padding: 12px;
		box-sizing: border-box;
		.title {
			box-sizing: border-box;
			font-weight: bold;
		}
		.forms {
			width: 100%;
			.line {
				padding: 12px;
				box-sizing: border-box;
				border-bottom: 1px solid #E9E9E9;

				.lineTit {
					// font-weight: bold;
					width: 22%;
					text-align: left;
					margin-right: 10px;
				}

				.lineVal {
					flex: 1;

					.tx {
						width: 40px;
						height: 40px;

						image {
							width: 40px;
							height: 40px;
							border-radius: 50%;
						}
					}

					.ipt {
						flex: 1;

						input {
							text-align: right;
						}
					}

					.rightIcon {
						width: 16px;
						margin-left: 4px;
					}
				}
			}

			.line:last-child {
				border: none;
			}
		}

		.imgs {
			width: 100%;
			padding: 12px 0;

			.sfz {
				width: 130px;
			}

			.upTool {
				width: 75px;
				height: 75px;
				margin-right: 0;
			}

			.imgOne {
				width: 75px;
				height: 75px;
				border-radius: 4px;
				margin-right: 8px;
				margin-bottom: 8px;
				position: relative;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				.del {
					width: 16px;
					height: 16px;
					position: absolute;
					top: 0;
					right: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.imgOne:nth-child(4n + 4) {
				margin-right: 0;
			}
		}
	}

	.forms {
		width: 100%;
		padding: 0 12px;
		box-sizing: border-box;
		background: white;
		margin-bottom: 12px;

		.line {
			padding: 12px;
			box-sizing: border-box;
			border-bottom: 1px solid #E9E9E9;

			.lineTit {
				width: 22%;
				text-align: left;
				margin-right: 10px;
			}

			.lineVal {
				flex: 1;

				.tx {
					width: 40px;
					height: 40px;

					image {
						width: 40px;
						height: 40px;
						border-radius: 50%;
					}
				}

				.ipt {
					flex: 1;

					input {
						text-align: right;
					}
				}

				.rightIcon {
					width: 16px;
					margin-left: 4px;
				}
			}
		}

		.line:last-child {
			border: none;
		}
	}

	page {
		background: #F6F6F6;
	}
</style>